<template>
	<view class="main-content">
		<!-- #ifndef H5 -->
		<u-navbar :is-back="false" :border-bottom="false" title-color="#fff" title="分类管理" :background="{background: 'rgba(29, 176, 252,.05)' }"></u-navbar>
		<!-- #endif -->
		<u-row class="bg-white goods-category padding-top-30"
			v-bind:class="{'padding-bottom-30':lists.length - 1 == k,'border-radius-20-20-0-0':k == 0,'border-radius-0-0-20-20':lists.length - 1 == k}" v-for="(v,k) in lists">
			<u-col span="9">
				<text v-text="v.name" class="goods-category-name"></text>
			</u-col>
			<u-col span="3">
				<view class="row-between padding-right-30">
					<u-icon :size="34" color="#1db0fc" name="edit-pen-fill" @click="editGoodsCategory(v.id)"></u-icon>
					<u-icon :size="34" color="#fa3534" name="trash-fill" @click="delGoodsCategory(v.id)" ></u-icon>
				</view>
			</u-col>
			<u-line color="#ddd" margin="30rpx 30rpx 0 30rpx" v-if="lists.length - 1 > k" />
		</u-row>
		<u-popup v-model="popupStatus" width="80%" mode="center">
			<view class="create-main-content bg-white">
				<u-icon :size="34" color="#909399" name="close" class="close-icon" @click="popupStatus = false"></u-icon>
				<text class="title" v-text="popupTitle"></text>
				<u-form ref="uForm" class="from">
					<u-form-item label="名称"><u-input v-model="name" /></u-form-item>
					<u-form-item label="序号"><u-input v-model="sort" /></u-form-item>
				</u-form>
				<u-button shape="circle" hover-class="none" :custom-style="customStyle" @click="saveData">保存</u-button>
			</view>
		</u-popup>
		<view class="footer">
			<u-button shape="circle" hover-class="none" :custom-style="customStyle" @click="createGoodsCategory">创建分类</u-button>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		GoodsCategory,
		MerchantCreateGoodsCategory,
		MerchantInfoGoodsCategory,
		MerchantEditGoodsCategory,
		MerchantDelGoodsCategory,
	} from '@/api/merchant';
	export default {
		data() {
			return {
				id:0,
				name:'',
				sort:'0',
				popupStatus:false,
				popupTitle:'创建产品分类',
				customStyle: {
					background: 'linear-gradient(to bottom,rgba(29, 176, 252,1) 0,rgba(29, 176, 252,.8))', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#fff'
				},
				lists: []
			}
		},
		onLoad() {
			GoodsCategory({
				id: 1
			}).then(res => {
				if (res.code == 1) {
					this.lists = res.data
				}
			})
		},
		methods:{
			createGoodsCategory(){
				this.id = 0;
				this.popupStatus = true;
				this.name = '';
				this.sort = '0';
				this.popupTitle = '创建产品分类';
			},
			editGoodsCategory(id){
				this.id = id;
				MerchantInfoGoodsCategory({
					id:this.id
				}).then(res =>{
					if(res.code == 1){
						this.name = res.data.name;
						this.sort = res.data.sort;
						this.popupStatus = true;
						this.popupTitle = '产品分类信息调整';
					}
				})
			},
			delGoodsCategory(id){
				MerchantDelGoodsCategory({
					id:id
				}).then(res =>{
					if(res.code == 1){
						this.$refs.uToast.show({
							title: '删除成功',
							type: 'success',
							url:'/pages/bundle/merchants/goods_category/lists'
						})
					}
				})
			},
			saveData(){
				var _this = this;
				if(_this.id == 0){
					MerchantCreateGoodsCategory({
						name:_this.name,
						sort:_this.sort
					}).then(res => {
						if(res.code == 1){
							this.popupStatus = false;
							_this.$refs.uToast.show({
								title: '保存成功',
								type: 'success',
								url:'/pages/bundle/merchants/goods_category/lists'
							})
						}
					})
				}else{
					MerchantEditGoodsCategory({
						id:_this.id,
						name:_this.name,
						sort:_this.sort
					}).then(res => {
						if(res.code == 1){
							this.popupStatus = false;
							_this.$refs.uToast.show({
								title: '保存成功',
								type: 'success',
								url:'/pages/bundle/merchants/goods_category/lists'
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	uni-page-body,
	page,
	.main-content {
		height: 100%;
	}

	.main-content {
		padding: 30rpx 20rpx;
		background: linear-gradient(180deg, #1db0fc 0, #f6f6f6);
		background-repeat: no-repeat;
		background-size: 100% 50vh;
		padding-bottom: 9vh;
		
		.goods-category{
			
			.goods-category-name{
				padding-left: 30rpx;
			}
		}
	}
	
	.footer {
		position: fixed;
		width: 100%;
		padding: 0 10%;
		bottom: 3vh;
		margin: 0 auto;
		z-index: 2;
	}

	.padding-top-30 {
		padding-top: 30rpx;
	}

	.padding-bottom-30 {
		padding-bottom: 30rpx;
	}

	.padding-right-30 {
		padding-right: 30rpx;
	}
	
	.border-radius-20-20-0-0{
		border-radius: 10rpx 10rpx 0 0;
	}
		
	.border-radius-0-0-20-20{
		border-radius: 0 0 10rpx 10rpx;
	}
	
	.create-main-content{
		border-radius: 10rpx;
		overflow: hidden;
		padding: 40rpx;
		
		.title{
			line-height: 88rpx;
			display: block;
			text-align: center;
			color: rgb(96, 98, 102);
			font-size: 16px;
			font-weight: normal;
		}
		
		.from{
			margin-bottom: 50rpx;
		}
		
		.close-icon{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}
</style>
